<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>

    <el-form
      :model="Models"
      :rules="editRules"
      ref="userForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-tabs type="border-card" v-model="activeTabName">
        <el-tab-pane
          name="userInfoTab"
          label="基本信息"
          class="user-info-tab-pane"
        >
          <el-row>
            <el-col :span="12"
              ><el-form-item label="档案号" prop="fileNumber">
                <el-input
                  :disabled="true"
                  :maxlength="32"
                  v-model="Models.fileNumber"
                  autofocus
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12"
              ><el-form-item label="姓名" prop="name">
                <el-input
                  :disabled="true"
                  :maxlength="32"
                  v-model="Models.name"
                  autofocus
                ></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-row>
            <el-col :span="12"
              ><el-form-item label="性别" prop="sex">
                <el-input
                  :disabled="true"
                  :maxlength="32"
                  v-model="Models.sex"
                  autofocus
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12"
              ><el-form-item label="年龄" prop="age">
                <el-input
                  :disabled="true"
                  :maxlength="32"
                  v-model="Models.age"
                  autofocus
                ></el-input> </el-form-item
            ></el-col>
          </el-row>

          <el-form-item label="疾病史" prop="diseaseHistory">
            <el-col :span="24"
              ><el-input
                :disabled="true"
                class="properties-textarea"
                type="textarea"
                :maxlength="32"
                v-model="Models.diseaseHistory"
              ></el-input
            ></el-col>
          </el-form-item>

          <el-form-item label="手术史" prop="surgeryHistory">
            <el-col :span="24"
              ><el-input
                :disabled="true"
                class="properties-textarea"
                type="textarea"
                :maxlength="32"
                v-model="Models.surgeryHistory"
              ></el-input
            ></el-col>
          </el-form-item>

          <el-form-item label="遗传史" prop="geneticHistory">
            <el-col :span="24"
              ><el-input
                :disabled="true"
                class="properties-textarea"
                type="textarea"
                :maxlength="32"
                v-model="Models.geneticHistory"
              ></el-input
            ></el-col>
          </el-form-item>
        </el-tab-pane>

        <!-- <el-tab-pane label="体检信息">
          <h1>还没有可以使用的信息</h1>
        </el-tab-pane>
        <el-tab-pane label="评估结果">
          <h1>还没有可以使用的信息</h1>
        </el-tab-pane> -->

        <el-tab-pane label="确认分类">
          <el-form-item label="确认分类">
            <div style="margin: 15px 0"></div>
            <el-checkbox-group
              v-model="Models.disIds"
              @change="handleCheckedRolesChange"
            >
              <el-checkbox
                v-for="role in roleCheckboxList.roles"
                :label="role.disId"
                :key="role.disId"
                >{{ role.disName }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <el-col :span="12"
              ><el-form-item label="健康管理师:" prop="healthManager">
                <el-select
                      v-model="Models.healthManager"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in healthManagerList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option> </el-select>
              </el-form-item>
            </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="doUpdatePopulation()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { updatePopualtion } from "@/api/HealthIntervention/populationClassification";

export default {
  name: "pop-edit",
  data() {
    return {
      loading: false,
      Models: {
        id:0,
        healthManager:'',
        disIds: [],
      },
      roleCheckboxList: {
        checkAll: false,
        isIndeterminate: true,
        roles: [],
      },
      healthManagerList:[
        {label:'周某某',value:'周某某'},
        {label:'张老师',value:'张老师'},
        {label:'十榴解',value:'十榴解'},
        {label:'对局',value:'对局'},
      ],
      dialogProps: {
        visible: false,
        action: "",
        title: "",
      },
      activeTabName: "userInfoTab",
      editRules: {},
    };
  },
  methods: {

    handleDialogClose() {
      this.dialogProps.visible = false;
    },

    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["userForm"].clearValidate();
      });
    },

    doUpdatePopulation() {
      this.loading = true
      updatePopualtion(this.Models)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
        this.$message({
            message: "成功",
            type: "success",
          });
      })
      .catch(error => {
        this.outputError(error)      
      })
    },

    //复选框
    getAllRoleId() {
      let allRoleId = [];
      for (let role of this.roleCheckboxList.roles) {
        allRoleId.push(role.disId);
      }
      return allRoleId;
    },
    handleCheckedRolesChange(value) {
      let checkedCount = value.length;
      this.roleCheckboxList.checkAll = checkedCount === this.roleCheckboxList.roles.length;
      this.roleCheckboxList.isIndeterminate = checkedCount > 0 && checkedCount < this.roleCheckboxList.roles.length;
    },

    //全局提示
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  mounted: function () {
    this.$nextTick(() => {
      this.$on("openEditPopDialog", function (population, roles) {
        this.Models = population;
        this.roleCheckboxList.roles = roles;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改用户";
        this.activeTabName = "userInfoTab";
        this.dialogProps.visible = true;
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.user-info-tab-pane {
  margin-top: 10px;
}
</style>





